<template>
	<div class="wrapper">
		<v-head></v-head>
		<el-container style="color:#fff">
			<el-header>
				<p class="header-text">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地铁列车运行分为牵引加速阶段、匀速行驶阶段和减速制动阶段。其中，加速阶段又分为恒加速度牵引和恒功率牵引两个部分。供电系统结构图如下动画所示，主要包括母线、三相变压器、整流器、能量回馈系统、上行和下行供电接触轨和分段点等。在地铁列车减速制动过程中，牵引列车的电动机工作在发电状态，通过电磁转矩将列车减速，并将多余动能转换成电能输送回电网。当制动能量无法或者无法全部被其他车辆及电网吸收时，制动电阻会将剩余电能消耗掉，避免造成电网电压升高，影响地铁列车及其他设备正常运行。虚拟仿真实验中，可设置【能馈系统开关】投切能量回馈系统，并点击【运行】观察能力流动。
				</p>
			</el-header>
			<el-main>
				<el-row style="height: 100%;">
						<div class="grid-content bg-purple" style="float: left;">
							<div id='charge'>
								<p class="text">能馈系统开关</p>
								<!-- 开关 -->
								<div v-for="(item,index) in switchImg" :key="index">
									<img @click="isMove==false? changeColor(index):''" class="switch" :style="{left:item.left+'px'}" :src="item.url" alt="">
								</div>
								<!-- 红色的车 -->
								<div v-show="carStyle=='red'" @click="isMove==false?changeCar():''">
									<img :class="[{car:true}, {car1:true} ,{moveRight:moveCar}]" :style="{animationPlayState:running}" src="../../assets/img/metroExper/redCar1.png" alt="">
									<img :class="[{car:true}, {car2:true} ,{moveLeft:moveCar}]" :style="{animationPlayState:running}" src="../../assets/img/metroExper/redCar2.png" alt="">
								</div>
								<!-- 蓝色的车 -->
								<div v-show="carStyle=='blue'" @click="isMove==false?changeCar():''">
									<img :class="[{car:true}, {car1:true} ,{moveRight:moveCar}]" :style="{animationPlayState:running}" src="../../assets/img/metroExper/blueCar2.png" alt="">
									<img :class="[{car:true}, {car2:true} ,{moveLeft:moveCar}]" :style="{animationPlayState:running}" src="../../assets/img/metroExper/blueCar1.png" alt="">
								</div>
								<!-- 箭头 -->
								<div v-for="(item,index) in arrowlists" :key="index+'a'">
									<div :id="setId(index)" :class="`${'arrow'} ${isMove1(index) ? 'arrow_'+index : ''}`" :style="{left:item.left+'px',top:item.top+'px',animationPlayState:running}"></div>
								</div>
								<!-- 站牌 -->
								<div>
									<img class="busStop stop1" src="../../assets/img/metroExper/shangdi.png" alt="">
									<img class="busStop stop2" src="../../assets/img/metroExper/wudaokou.png" alt="">
									<img class="busStop stop3" src="../../assets/img/metroExper/zhichunlu.png" alt="">
									<img class="busStop stop4" src="../../assets/img/metroExper/xizhimen.png" alt="">
								</div>
							</div>
						</div>
						<div class="grid-content bg-purple-light" id='table'>
							<div v-show="dialogShowLine" id="rightLine" style="width:100%;"></div>
						</div>
				</el-row>
				<el-button id="button-run" size="small" @click="dialogShowLine = true;run()">{{text}}</el-button>
				<el-button id="button-back" size="small" @click="goBack()">返回上一层</el-button>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import bus from '../../assets/js/bus.js'
	import vHead from './Header.vue';
	import echarts from 'echarts';
	import animation from '../../assets/css/animation.css'
	import { mapMutations } from 'vuex'
	export default {
		components: {
			vHead
		},
		data() {
			return {
				isMove:false,//是否运行
				isShow:true,//箭头是否展示
				moveCar:false,//汽车是否运动
				carStyle:'red',//汽车颜色
				leftArrow:true,//箭头是否展示
				rightArrow:true,//箭头是否展示
				text:'运行',
				running:'paused',//动画是否暂停
				dialogShowLine:false,
				// 八个开关
				switchImg:[{
						left:103,
						url:require('../../assets/img/metroExper/2.png'),
					},{
						left:130,
						url:require('../../assets/img/metroExper/2.png'),
					},{
						left:210,
						url:require('../../assets/img/metroExper/2.png'),
					},{
						left:227,
						url:require('../../assets/img/metroExper/2.png'),
					},{
						left:583,
						url:require('../../assets/img/metroExper/2.png'),
					},{
						left:611,
						url:require('../../assets/img/metroExper/2.png'),
					},{
						left:680,
						url:require('../../assets/img/metroExper/2.png'),
					},{
						left:697,
						url:require('../../assets/img/metroExper/2.png'),
				}],
				// 24个箭头
				arrowlists:[
					
					{
							top:24,
							left:110,
						},{
							top:77,
							left:103,
						},{
							top:77,
							left:123,
						},{
							top:151,
							left:112,
						},{
							top:163,
							left:99,
						},{
							top:163,
							left:126,
					},
					
					{
							top:24,
							left:216,
						},{
							top:78,
							left:216,
						},{
							top:122,
							left:208,
						},{
							top:122,
							left:224,
					},
					
					{
							top:24,
							left:593,
						},{
							top:77,
							left:584,
						},{
							top:77,
							left:604,
						},{
							top:151,
							left:594,
						},{
							top:163,
							left:581,
						},{
							top:163,
							left:609,
					},
					{
							top:24,
							left:687,
						},{
							top:78,
							left:687,
						},{
							top:122,
							left:679,
						},{
							top:122,
							left:694,
					},
					
					{
							top:219,
							left:18,
						},{
							top:253,
							left:762,
					},
					
					{
							top:18,
							left:250,
						},{
							top:18,
							left:75,
						},{
							top:18,
							left:678,
						},{
							top:18,
							left:695,
					},
				]
			}
		},
		methods: {
			isMove1(index){
				if(this.leftArrow==false&&(index==6||index==7||index==8||index==9)){
					return false
				}else if(this.rightArrow==false&&(index==16||index==17||index==18||index==19)){
					return false
				}
				return true
			},
			setId(index){
				return 'arrow_'+index
			},
			run() {
				let _this = this;
				let a = document.getElementById('arrow_20')
				a.setAttribute("class","arrow_20")
				let b = document.getElementById('arrow_21')
				b.setAttribute("class","arrow_21")
				console.log(_this.text)
				if(_this.text=='运行'){
					_this.text='暂停';
					this.running = 'running';
				}else{
					this.running = 'paused'
					_this.text='运行';
				}
				this.moveCar = true
				_this.isMove = !_this.isMove;
				
			},
			changeCar(){
				if(this.carStyle=='red'){
					this.carStyle='blue'
				}else if(this.carStyle=='blue'){
					this.carStyle='red'
				}
			},

			goBack() {
				this.$router.go(-1)
			},

			showLine() {},

			setEnergyFeedbackEnabled(enabled) {
				if (this.$store.state.isEnergyFeedbackEnabled == enabled) {
					return
				}
				this.$notify({
          			title: enabled ? '能馈系统切入' : '能馈系统切出',
					type: enabled ? 'success' : 'warning'
				})
				this.$store.commit('setEnergyFeedbackEnabled', enabled)
			},
			changeColor(index){
				if(index=='0'||index=='1'||index=='4'||index=='5'){
					return
				}
				if(index=='2'||index=='3'){
					if(this.switchImg[index].url==require("../../assets/img/metroExper/2.png")){
						this.leftArrow = false;
						this.switchImg[2].url=require("../../assets/img/metroExper/1.png")
						this.switchImg[3].url=require("../../assets/img/metroExper/1.png")
					}else if(this.switchImg[index].url==require("../../assets/img/metroExper/1.png")){
						this.leftArrow = true;
						this.switchImg[2].url=require("../../assets/img/metroExper/2.png")
						this.switchImg[3].url=require("../../assets/img/metroExper/2.png")
					}
				}else if(index=='6'||index=='7'){
					if(this.switchImg[index].url==require("../../assets/img/metroExper/2.png")){
						this.rightArrow = false;
						this.switchImg[6].url=require("../../assets/img/metroExper/1.png")
						this.switchImg[7].url=require("../../assets/img/metroExper/1.png")
					}else if(this.switchImg[index].url==require("../../assets/img/metroExper/1.png")){
						this.rightArrow = true;
						this.switchImg[6].url=require("../../assets/img/metroExper/2.png")
						this.switchImg[7].url=require("../../assets/img/metroExper/2.png")
					}
				}
				this.setEnergyFeedbackEnabled(this.leftArrow && this.rightArrow)
			}
		}
	}
</script>

<style scoped="scoped">
	body .wrapper {
		background-image: url(../../assets/img/background.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.el-header {
		margin: 0 auto;
		margin-top: 30px;
		width: 90%;
		color: #00FFFF;
		line-height: 30px;
		font-size: 15px;
		height: 120px!important;
		background-image: url(../../assets/img/carExper/content.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: center; /*定义body的元素垂直居中*/
		justify-content: center;
	}
	
	/* .el-header .header-text{
		color: #00FFFF;
		line-height: 30px;
		font-size: 15px;
	} */

	.el-container {
		width: 100%;
		height: 92%;
		background-image: url(../../assets/img/metroExper/background.png);
		background-size: 99% 100%;
		margin-left: 15px;
		background-repeat: no-repeat;
		/* min-width: 1600px; */
	}

	.el-main {
		width: 95%;
		margin: 0 auto;
	}

	#charge {
		width: 800px;
		height: 500px;
		margin-left: 25px;
		background-image: url(../../assets/img/metroExper/guidao.png);
		background-size: 100% 100%;
		position: relative;
		overflow: hidden;
	}	
	
	#table{
		margin-left:850px;
		height: 100%;
	}
	/* 轨道交通 */
	.car{
		width:200px;
		position: absolute;
		cursor: pointer;
	}
	.car1{
		bottom: 55px;
		left:-100px;
		z-index: 9;
	}
	.car2{
		bottom: 70px;
		right:-100px;
		z-index: 8;
	}
	/* 开关 */
	.switch{
		position:absolute;
		top:180px;
		width:15px;
		height:15px;
		cursor: pointer;
	}

	/* 箭头 */
	.arrow,.arrow_20,.arrow_21{
		opacity: 0;
		width:0;
		height:0;
		border:10px solid transparent;
		border-top:5px solid;
		border-top-color:#2fe769;
		position: absolute;
		top:25px;
		left:117px;
		z-index: 10;
	}
	.arrow_22,.arrow_24{
		transform: rotate(90deg);
	}
	.arrow_23,.arrow_25{
		transform: rotate(-90deg);
	}
	
	
	/* 站牌 */
	.busStop{
		width:80px;
		position: absolute;
		top:362px;
	}
	.stop1{
		left:50px;
	}
	.stop2{
		left:250px;
	}
	.stop3{
		left:450px;
	}
	.stop4{
		left:650px;
	}
	
	/* 按钮 */
	.el-button.el-button--default.el-button--small,
	.el-button.el-button--primary.el-button--small {
		background-image: url(../../assets/img/button_blue.png);
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);
		position: absolute;
		right: 60px;
		bottom: 60px
	}

	#button-run {
		width: 80px;
		right: 60px;
	}

	#button-back {
		width: 100px;
		right: 160px;
	}

	.el-button.el-button--default.el-button--small:hover,
	.el-button.el-button--primary.el-button--small:hover {
		background-image: url(../../assets/img/button_red.png);
	}
	
	#rightLine{
		background-image: url(../../assets/img/metroExper/linePicture.png);
		background-size: 100% 100%;
		height:80%;
	}
	.text{
		color: #0077AA;
		margin-left: 270px;
		margin-top:176px
	}
</style>
